●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Overview header with notification and user icon.
- Four responsive stat cards (total bookings, active members, monthly revenue, court occupancy).
- Recent bookings data table with responsive columns and colored status badges.
- Side panel with quick action links and a placeholder bookings chart image.
- Small reusable StatCard component with parameters for Icon, Title, Value and Color.
## Key components
- Razor markup: PadelAdminDashboard.razor, StatCard.razor
- View model: BookingViewModel (Id, MemberName, CourtName, BookingDate, Status)
- Common constructs: foreach rendering, @code block, OnInitialized, method GetStatusClass for badge styles
- HTML elements: responsive table, img, buttons, font-awesome icons
## How it works
- Data is loaded on component initialization via OnInitialized and the LoadSampleData method that populates primitive fields and a List<BookingViewModel>.
- The recent bookings table is rendered with a foreach loop and uses BookingViewModel.BookingDate formatting and GetStatusClass to apply Tailwind-based badge classes.
- StatCard is a lightweight parameterized component that receives Icon, Title, Value and Color and renders a consistent card layout.
- Interaction patterns are static/placeholders: quick action links are anchor tags, chart is a placeholder image; no edit/dialog flows or form validation are present.
## Styling
- Tailwind CSS utilities drive layout (grid, flex, gap-*, p-*, text-*, rounded-*, shadow-*). Responsive classes include grid-cols-*/sm:*/lg:* and hidden md:table-cell directives.
- Font Awesome icons are used for visual glyphs (fa, fa-*) in StatCard and header controls.
- Badges use Tailwind color utility classes returned by GetStatusClass; cards use white background with rounded corners and shadow for visual separation.
- Layout is responsive by grid breakpoints, but large table columns are hidden on small screens via Tailwind responsive utilities.
## Reuse steps
1. Add the Razor files (PadelAdminDashboard.razor, StatCard.razor) and BookingViewModel to the project and register the route.
2. Ensure Tailwind CSS is available (project build pipeline or CDN during prototyping) and include Font Awesome for icons.
3. Import namespaces if needed and add the route to NavMenu or Router.
4. Replace LoadSampleData with real data: inject a service (e.g., IBookingService) into the component and call async methods in OnInitializedAsync.
5. Swap the placeholder chart image for a chart component (Chart.js, ApexCharts, or a Blazor chart library) and add authentication/authorization as required.
## Limitations & next steps
- This is a single-page example with in-memory sample data; no API, DI, or state management is wired.
- No form editing, paging, sorting, or server-side filtering is implemented for the table.
- Chart is a static placeholder image; replace with a chart component to show real metrics.
- Add service injection, async data loading (OnInitializedAsync), error handling, and authentication/authorization for production use.
- Consider extracting table row rendering and badge logic into smaller components if reuse is needed.
*Generated by Instruct UI; markup and code are editable for integration into a Blazor /.NET project.*